<template>
    <div class="wrap">
        <div class="content_box" id="box" ref="scrollBox">
            <div class="timer">2022-08-02 11:08:07</div>
            <div :class="item.position == 'left' ? 'userbox2' : 'userbox'" v-for="(item, index) in chatList" :key="index">
                <div :class="item.position == 'left' ? 'nameInfo2' : 'nameInfo'">
                    <div style="font-size: 14px">{{item.username }}</div>
                    <div :class="item.position == 'left' ? 'contentText2' : 'contentText'">
                        {{ item.content }}
                    </div>
                </div>
                <div>
                    <van-image round width="50px" height="50px" :src="item.url" />
                </div>
            </div>
        </div>
        <div class="bottom">
            <van-field v-model="inputValue" center type="textarea" :autosize="{ maxHeight: 100, minHeight: 25 }"
                placeholder="请输入内容" rows="1">
                <template #button>
                    <van-button size="small" type="primary" @click="sendOut">发送</van-button>
                </template>
            </van-field>
        </div>
    </div>
</template>
  
<script>
export default {


    data() {
        return {
            //聊天数据
            chatList: [
            ],
            //用户名
            userName: "张三",
            //输入内容
            inputValue: "",
            //滚动条距离顶部距离
            scrollTop: 0
        };
    },
    mounted() {


        this.setPageScrollTo()
        //创建监听内容部分滚动条滚动
        this.$refs.scrollBox.addEventListener('scroll', this.srTop)
    },
    methods: {

        //返回
        onClickLeft() {
            console.log("返回");
        },
        //更多
        onClickRight() {


            console.log("按钮");
        },
        //滚动条默认滚动到最底部
        setPageScrollTo(s, c) {


            //获取中间内容盒子的可见区域高度
            this.scrollTop = document.querySelector("#box").offsetHeight;
            setTimeout((res) => {


                //加个定时器，防止上面高度没获取到，再获取一遍。
                if (this.scrollTop != this.$refs.scrollBox.offsetHeight) {


                    this.scrollTop = document.querySelector("#box").offsetHeight;
                }
            }, 100);
            //scrollTop：滚动条距离顶部的距离。
            //把上面获取到的高度座位距离，把滚动条顶到最底部
            this.$refs.scrollBox.scrollTop = this.scrollTop;
        },
        //滚动条到达顶部
        srTop() {


            //判断：当滚动条距离顶部为0时代表滚动到顶部了
            if (this.$refs.scrollBox.scrollTop == 0) {


                //逻辑简介：
                //到顶部后请求后端的方法，获取第二页的聊天记录，然后插入到现在的聊天数据前面。
                //如何插入前面：可以先把获取的数据保存在 A 变量内，然后 this.chatList=A.concat(this.chatList)把数组合并进来就可以了

                //拿聊天记录逻辑:
                //第一次调用一个请求拉历史聊天记录，发请求时参数带上页数 1 传过去，拿到的就是第一页的聊天记录，比如一次拿20条。你显示出来
                //然后向上滚动到顶部时，触发新的请求，在请求中把分页数先 +1 然后再请求，这就拿到了第二页数据，然后通过concat合并数组插入进前面，依次类推，功能完成！
                console.log('到顶了，滚动条位置 :', this.$refs.scrollBox.scrollTop);
            }
        },
        sendOut() {


            console.log('发送成功');
        }
    },
};
</script>
  
<style scoped>
.wrap {


    height: 100%;
    width: 100%;
    position: relative;
}
.bottom {


    min-height: 50px;
    width: 100%;
    border-top: 1px solid #eaeaea;
    position: fixed;
    bottom: 0;
}

.content_box {


    /* 
    中间栏计算高度，110是包含了上下固定的两个元素高度90
    这里padding：10px造成的上下够加了10，把盒子撑大了，所以一共是20要减掉
    然后不知道是边框还是组件的原因，导致多出了一些，这里再减去5px刚好。不然会出现滚动条到顶或者底部的时候再滚动的话就会报一个错，或者出现滚动条变长一下的bug
    */
    height: calc(100% - 115px);
    overflow: auto;
    padding: 10px;
}

.timer {


    text-align: center;
    color: #c2c2c2;
}

/* 发送的信息样式 */
/* 
  右边消息思路解释：首先大盒子userbox内放两个盒子，一个放头像，一个放用户名和发送的内容，我们先用flex让他横向排列。
  然后把写文字的大盒子设置flex：1。这个属性的意思就是让这个元素撑满父盒子剩余位置。然后我们再把文字盒子设置flex，并把他对齐方式设置为尾部对齐就完成了基本的结构，然后微调一下就可以了
  */
.userbox {


    width: 100%;
    display: flex;
    margin-bottom: 10px;
}

.nameInfo {


    /* 用flex：1把盒子撑开 */
    flex: 1;
    margin-right: 10px;
    /* 用align-items把元素靠右对齐 */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.contentText {


    background-color: #9eea6a;
    /* 把内容部分改为行内块元素，因为盒子flex：1把盒子撑大了，所以用行内块元素让内容宽度不根据父盒子来 */
    display: inline-block;
    /* 这四句是圆角 */
    border-top-left-radius: 10px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    /* 最大宽度限定内容输入到百分61换行 */
    max-width: 61%;
    padding: 5px 10px;
    /* 忽略多余的空白，只保留一个空白 */
    white-space: normal;
    /* 换行显示全部字符 */
    word-break: break-all;
    margin-top: 3px;
    font-size: 14px;
}

/* 接收的信息样式 */
/* 
  左边消息思路解释：跟上面一样，就是换一下位置，首先通过把最外层大盒子的排列方式通过flex-direction: row-reverse;属性翻转，也就是头像和文字盒子换位置
  然后删除掉尾部对齐方式，因为不写这个默认是左对齐的。我们写的左边就没必要再写了。
  */
.userbox2 {


    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 10px;
}

.nameInfo2 {


    /* 用flex：1把盒子撑开 */
    flex: 1;
    margin-left: 10px;
}

.contentText2 {


    background-color: #9eea6a;
    /* 把内容部分改为行内块元素，因为盒子flex：1把盒子撑大了，所以用行内块元素让内容宽度不根据父盒子来 */
    display: inline-block;
    /* 这四句是圆角 */
    border-top-left-radius: 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    /* 最大宽度限定内容输入到百分61换行 */
    max-width: 61%;
    padding: 5px 10px;
    /* 忽略多余的空白，只保留一个空白 */
    white-space: normal;
    /* 换行显示全部字符 */
    word-break: break-all;
    margin-top: 3px;
    font-size: 14px;
}
</style>